<template>
  <div class="page">
    <s-header :name="'异议详情'" :back="'/user/public-dissent'"></s-header>
    <van-form class="complaint">
      <div class="card-box">
        <div class="card-item">
          <div class="card-header">
            <div class="header-title">
              <div class="title">异议内容</div>
            </div>
          </div>
          <div class="card-body">
            <ul class="apply-info">
              <li>提出时间：{{ dataFrom.dissentTime }}</li>
              <li>异议对象：{{ dataFrom.dissentObject }}</li>
              <li class="content">异议内容：{{ dataFrom.dissentContent }}</li>
            </ul>
          </div>
        </div>

        <div class="card-item">
          <div class="card-header">
            <div class="header-title">
              <div class="title">办理进度</div>
              <div :class="`notice-status ${tagClass(dataFrom.dissentStatus)}`">
                {{ statusStrMap(dataFrom.dissentStatus) }}
              </div>
            </div>
          </div>
          <div class="card-body">
            <ul class="apply-info">
              <li>办理状态：{{ publicHandle.reviewResultName }}</li>
              <li>办理部门：{{ publicHandle.handelDept }}</li>
              <li>办理时间：{{ publicHandle.handleTime }}</li>
              <li>办理意见：{{ publicHandle.handleOpinions }}</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="btn-group">
        <van-button type="button" class="cus-btn btn-default" @click="handleToRouter('/user/public-dissent')">返回</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import sHeader from '@/components/SimpleHeader'
import { getPublicDissentDetail } from '@/service/user'
export default {
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      isCommit: false,
      chosenAddressId: '1',
      list: [],
      from: route.query.from,
      pictures: [],
      allFileList: [],
      isDetail: false,
      complaintId: null,
      publicHandle: {
        reviewResultName: '',
        handelDept: '',
        handleTime: '',
        handleOpinions: '',
      },
      dataFrom: {
        dissentTime: '',
        dissentObject: '',
        dissentContent: '',
        dissentStatus: '',
      },
    })

    // 全局属性
    const { listAssign } = getCurrentInstance().appContext.config.globalProperties

    onMounted(async () => {
      const { id } = route.params
      getPublicDissentDetail(id).then((res) => {
        listAssign(state.dataFrom, res.data)
        listAssign(state.publicHandle, res.data.publicHandle)
      })
    })

    const handleToRouter = (r, query) => {
      router.push({ path: r, query: query || {} })
    }

    const tagClass = (status) => {
      let className = ''
      switch (status) {
        case '0':
          className = ''
          break
        case '04':
          className = 'status-success'
          break
        case '05':
          className = 'status-danger'
          break
        default:
          break
      }
      return className
    }

    const statusStrMap = (status) => {
      let statusStr = '未办理'
      switch (status) {
        case '0':
          statusStr = '未办理'
          break
        case '04':
          statusStr = '异议成立'
          break
        case '05':
          statusStr = '异议不成立'
          break
        default:
          break
      }
      return statusStr
    }

    return {
      statusStrMap,
      tagClass,
      ...toRefs(state),
      handleToRouter,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .complaint {
    margin-top: 15px;
    .van-divider {
      margin: 10px 0 0;
    }
    /deep/ .van-field__label {
      font-size: 15px;
      font-weight: 400;
      color: #9297ae;
    }
    .card-body {
      .cell-box {
        // display: flex;
        &:after,
        &:before {
          display: table;
          content: '';
        }
        &:after {
          clear: both;
        }

        .value {
          font-size: 15px;
          font-weight: 400;
          color: #2e3f6a;
          position: relative;
          margin-left: 110px;
          line-height: 25px;
        }
      }
      .img-box {
        .pictures {
          width: 53px;
          height: 53px;
          margin-right: 10px;
        }
      }
      .apply-info {
        li {
          margin-top: 8px;
        }
        .content {
          line-height: 23px;
        }
      }
    }
    // .card-body {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;

    // }
    .header-title {
      font-size: 16px;
      font-weight: bold;
      .title {
        width: 220px;
        line-height: 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .fj();
      .notice-status {
        background: #e1f1ff;
        border-radius: 3px;
        color: #216eec;
        font-size: 13px;
        font-weight: 400;
        padding: 4px 14px 5px;
      }
      .status-success {
        background-color: #e8f7e0;
        color: #5eb02d;
      }
      .status-danger {
        background-color: #ffe9e9;
        color: #df3838;
      }
    }
    .btn-group {
      padding: 20px 0;
      .cus-btn {
        width: 100%;
      }
    }
  }
}
</style>
